import { FormInstance, Modal } from 'antd';
import React, { useRef } from 'react';

import type { TenantAddItem } from '../data.d';
import { ProForm, ProFormText } from '@ant-design/pro-components';

interface AddFormProps {
  onSubmit: (values: TenantAddItem) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const AddForm: React.FC<AddFormProps> = (props) => {

  const {
    onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;

  const formRef = useRef<FormInstance>();

  return (
    <Modal
      title="添加客户"
      open={addModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleAddModalVisible(false)}
      afterClose={() => handleAddModalVisible(false)}
    >

      <ProForm<TenantAddItem>
        onFinish={(values) => {
          return handleAdd(values)
        }}
        formRef={formRef}
        layout="vertical"
      >

        <ProFormText
          width={'xl'}
          name="name"
          label="客户名称"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入客户名称' }]}
        />

        <ProFormText
          width={'xl'}
          name="account"
          label="客户账号"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入客户账号' }]}
        />

        <ProFormText
          width={'xl'}
          name="password"
          label="客户密码"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入客户密码' }]}
        />

        <ProFormText
          width={'xl'}
          name="push_url"
          label="推送地址"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入推送地址' }]}
        />

        <ProFormText
          width={'xl'}
          name="mobile"
          label="联系方式"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入联系方式' }]}
        />

        <ProFormText
          width={'xl'}
          name="mail"
          label="邮箱"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入邮箱' }]}
        />

      </ProForm>

    </Modal >
  );
};
export default AddForm;
